<template>
  <!-- 登录面板 -->
  <div style="width:40%;margin-top: 20px;">
    <el-form ref="user" :model="user" :rules="rules" label-width="150px" class="demo-user"
      :label-position="labelPosition">
      <!-- <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username"></el-input>
      </el-form-item> -->
      <el-form-item label="姓名" prop="name">
        <el-input v-model="user.name" />
      </el-form-item>
      <el-form-item label="证件号码" prop="idcard">
        <el-input v-model="user.idcard" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="user.phone" />
      </el-form-item>
      <el-form-item label="家庭住址" prop="address">
        <el-input v-model="user.address" />
      </el-form-item>
      <!-- <el-form-item label="登录密码" prop="password">
        <el-input v-model="user.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="登录密码确认" prop="password1">
        <el-input v-model="user.password1" show-password></el-input>
      </el-form-item> -->
      <el-form-item label="支付密码" prop="paypassword">
        <el-input v-model="user.paypassword" show-password />
      </el-form-item>
      <el-form-item label="支付密码确认" prop="payPassword1">
        <el-input v-model="user.payPassword1" show-password />
      </el-form-item>
      <el-form-item prop="mobileBank" size="mini">
        <el-checkbox v-model="user.mobileBank" :checked="user.mobileBank == 1 ? true : false" true-label="1" false-label="0"
          @change="e => changeMobileBank(e)">
          开通手机银行
        </el-checkbox>
      </el-form-item>
      <el-form-item prop="onlineBank" size="mini">
        <el-checkbox v-model="user.onlineBank" :checked="user.onlineBank == 1 ? true : false" true-label="1" false-label="0"
          @change="e => changeOnlineBank(e)">开通网上银行
        </el-checkbox>
      </el-form-item>
      <el-form-item prop="sms" size="mini">
        <el-checkbox v-model="user.sms" :checked="user.sms == 1 ? true : false" true-label="1" false-label="0"
          @change="e => changeSms(e)">开通短信通知
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" style="width: 48%" @click="submitForm('user')">立即开户
        </el-button>
        <el-button type="primary" size="medium" style="width: 48%" @click="cancelRegister()">取消开户
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { signUp } from '@/api/api'
import {Encrypt} from '@/utils/secret'
export default {
  data() {
    const validatePass3 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.user.payPassword1 !== '') {
          this.$refs.user.validateField('payPassword1')
        }
        callback()
      }
    }
    const validatePass4 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.user.paypassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      labelPosition: 'right',
      user: {
        name: '',
        idcard: '',
        phone: '',
        address: '',
        paypassword: '',
        payPassword1: '',
        mobileBank: 0,
        onlineBank: 0,
        sms: 0
      },
      rules: {
        name: [
          {
            required: true,
            min: 2,
            max: 13,
            message: '姓名长度在 2 到 13 个字符',
            trigger: 'blur'
          }
        ],
        address: [
          {
            required: true,
            message: '请输入家庭地址',
            trigger: 'blur',
            min: 2,
            max: 20
          }
        ],
        idcard: [
          {
            pattern:
              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            required: true,
            message: '请输入合法的十八位证件号码',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的11位手机号码',
            trigger: 'blur'
          }
        ],
        paypassword: [
          {
            required: true,
            pattern: /^[0-9]{6}$/,
            message: '请输入包含数字的6位支付密码',
            trigger: 'blur'
          },
          {
            validator: validatePass3,
            trigger: 'blur'
          }
        ],
        payPassword1: [
          {
            required: true,
            pattern: /^[0-9]{6}$/,
            message: '请输入包含数字的6位支付密码',
            trigger: 'blur'
          },
          {
            validator: validatePass4,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm(user) {
      this.$refs[user].validate((valid) => {
        if (valid) {
          signUp({
            'idCard': this.user.idcard,
            'userPhone': this.user.phone,
            'password':Encrypt(this.user.paypassword) ,
            'userName': this.user.name,
            'userAddress': this.user.address,
            'mobileBank': this.user.mobileBank,
            'onlineBank': this.user.onlineBank,
            'sms': this.user.sms
          }).then((res) => {
            // console.log(res);
            if (res.data.responseStatusCode == 200) {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'success'
              })
              this.user.idcard = '',
              this.user.phone = '',
              this.user.paypassword = ''
              this.user.payPassword1 = '',
              this.user.name = '',
              this.user.address = '',
              this.user.mobileBank = '',
              this.user.onlineBank = '',
              this.user.sms = ''
              // this.$router.push('/')
            } else if (res.data.responseStatusCode == 408) {
          localStorage.removeItem('token')
          localStorage.removeItem('role')
          localStorage.removeItem('username')
          localStorage.removeItem('bankCard')
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          })
        } else {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'error'
              })
              this.user.idcard = '',
                this.user.phone = '',
                this.user.paypassword = ''
              this.user.payPassword1 = '',
                this.user.name = '',
                this.user.address = '',
                this.user.mobileBank = '',
                this.user.onlineBank = '',
                this.user.sms = ''
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancelRegister() {
      this.$router.push('/')
    },
    changeMobileBank(e) {
      console.log('e', e)
      this.user.mobileBank = e
      // console.log(this.user.mobileBank);
    },
    changeOnlineBank(e) {
      console.log('e', e)
      this.user.onlineBank = e
      // console.log(this.user.mobileBank);
    },
    changeSms(e) {
      console.log('e', e)
      this.user.sms = e
      // console.log(this.user.mobileBank);
    }

  }
}
</script>
<style scoped>
.login {
  width: 600px;
  height: 100%;
  /* display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../../assets/image/login.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #cccccc; */
  /* position: relative; */
}

.login-box {
  width: 600px;
  /* height: 287px; */
  /* background: hsla(0, 0%, 100%, 0.3); */
  /* border-radius: 5px; */
  /* box-shadow: 0 0 2px #f7f7f7; */
  /* border: 1px solid #f7f7f7; */
  /* position: absolute; */
  /* left: 5%; */
  /* top: 20%; */
  /* transform: translate(-40%, -20%); */
  /* margin-left: -175px;
  margin-top: -150px; */
}

.login-box-from {
  width: 100%;
  height: auto;
  padding: 30px;
  box-sizing: border-box;
  color: white;
}
</style>
